<template>
  <div class="main">
    <div class="login-title">
      <p>Hello! 欢迎登录</p>
    </div>
    <div class="login-from">
      <div>
        <div class="item">
          <p class="sort-title">手机号码</p>
          <div class="input-item">
            <input type="number" v-model="phone" maxlength="11" class="phone" placeholder="请输入手机号码">
            <span class="get-code" @click="getCode">{{codeMsg}}</span>
          </div>
        </div>
        <div class="item">
          <p class="sort-title">验证码</p>
          <div class="input-item">
            <input type="text" v-model="captcha" class="captcha" placeholder="请输入验证码">
          </div>
        </div>
      </div>
      <div class="checobox-wrap">
        <van-checkbox v-model="checked" checked-color="#07c160">我已阅读且同意</van-checkbox>
        <span class="agree" @click="handleClick">《用户服务协议》</span>
      </div>
    </div>
    <ActionButton class="blue-btn" text="登录" @click="handleSubmit"/>
    <span class="register" @click="toRegister">新用户注册</span>

    <!-- <WechatLogin/> -->
  </div>
</template>

<script>
import api from "../../api";
import ActionButton from "@/components/common/ActionButton";
import WechatLogin from "@/components/login/WechatLogin";
import { clearInterval, setTimeout, clearTimeout } from "timers";
let timer = null;
const IsPhone = /^1[345789]\d{9}$/;

export default {
  title: "登陆",
  components: { ActionButton, WechatLogin },
  data() {
    return {
      phone: "",
      captcha: "",
      checked: false,
      time: 10,
      codeMsg: "获取验证码",
      canClick: true
    };
  },
  computed: {},
  methods: {
    handleClick() {
      this.$toast(`点击协议`);
    },
    toRegister() {
      this.$routerPush(this, "/pages/login/Register");
    },
    countDown() {
      timer = setTimeout(() => {
        this.time -= 1;
        this.codeMsg = `剩余${this.time}秒`;
        if (this.time > 0) {
          this.countDown();
        } else {
          this.codeMsg = `重新发送`;
          clearTimeout(timer);
          timer = null;
          this.time = 10;
          this.canClick = true;
        }
      }, 1 * 1000);
    },
    getSmsCode() {
      api.passport.getSmsCode(this.phone, res => {
        console.log(res);
        this.$toast(`验证码已发送`);
      });
    },
    getCode() {
      if (!this.canClick) {
        return;
      }
      if (!IsPhone.test(this.phone)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      this.canClick = false;
      this.countDown();
      this.getSmsCode();
    },
    handleSubmit() {
      if (!IsPhone.test(this.phone)) {
        this.$toast("请输入正确的手机号码");
        return;
      }
      if (!this.captcha) {
        this.$toast("请输入短信验证码");
        return;
      }
      if (!this.checked) {
        this.$toast("请勾选用户服务协议");
        return;
      }
      api.passport.login(
        this.phone,
        this.captcha,
        res => {
          let that = this;
          this.$store.commit("setUid", res.uid);
          this.$toast.success({
            message: `登录成功`,
            position: "middle",
            onClose() {
              that.$routerPush(that, `/pages/homepage/Index`);
            }
          });
        },
        res => {
          this.$toast(res.msg);
        }
      );
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.main {
  padding: 8vw;
  .login-title {
    font-size: 4.8vw;
    margin-bottom: 10.67vw;
  }

  .item {
    margin-bottom: 5.87vw;
    .sort-title {
      font-size: 3.47vw;
      color: #333;
    }
    .input-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e5e5e5;

      .get-code {
        display: inline-block;
        font-size: 3.8vw;
        border-left: 0.1333vw solid #e5e5e5;
        padding: 0 0 0 3.8vw;
        width: 31vw;
      }
      input {
        width: 100%;
        padding: 4.27vw 0;
        border: 0;
      }
    }
  }
  .register {
    font-size: 1.7333vw;
    color: #676767;
  }
  .checobox-wrap {
    display: flex;
    align-items: center;
  }
  .agree {
    color: #ff0000;
  }
}
</style>